<template>
    <view>
        <view class="header">
            <image class="headerBack" src="../../static/images/jpg02.jpg"></image>
            <u-navbar
                :title="$lang('国内采购')"
                :bgColor="'rgba(255,255,255,0)'"
                :fixed="false"
                autoBack
            >
            </u-navbar>
            <view class="nav">
                <view class="li" :class="active == 1 ? 'active' : ''" @click="activeClick(1)">
                    {{$lang('国内采购')}}
                    <image src="../../static/images/icon10.png"></image>
                </view>
                <view class="li" :class="active == 2 ? 'active' : ''" @click="activeClick(2)">
                    {{$lang('本地采购')}}
                    <image src="../../static/images/icon10.png"></image>
                </view>
                <view class="li" :class="active == 3 ? 'active' : ''" @click="activeClick(3)">
                    {{$lang('直营工厂采购')}}
                    <image src="../../static/images/icon10.png"></image>
                </view>
                <view class="li" :class="active == 4 ? 'active' : ''" @click="activeClick(4)">
                    {{$lang('补件采购')}}
                    <image src="../../static/images/icon10.png"></image>
                </view>
            </view>
        </view>
        <scroll-view scroll-y class="scrollView" :style="{height:scrollViewHeight}">
            <domestic v-if="active == 1" :valueVal="valueVal"></domestic>
            <local v-if="active == 2" :valueVal="valueVal"></local>
            <directFactory v-if="active == 3" :valueVal="valueVal"></directFactory>
            <suppleParts v-if="active == 4" :valueVal="valueVal"></suppleParts>
        </scroll-view>
<!--        <view style="height: 44px;background: #f00;position: absolute;top: 34px;left: 0;right: 0"></view>-->
    </view>
</template>

<script>
    import domestic from "./components/domestic";
    import local from "./components/local";
    import directFactory from "./components/directFactory";
    import suppleParts from "./components/suppleParts";
    export default {
        components:{
            domestic,
            local,
            directFactory,
            suppleParts
        },
        data() {
            return {
                active:1,
                scrollViewHeight:0,
                valueVal:1111
            }
        },
        onShow(){
            uni.$on('returnData',res => {
                this.valueVal ++;
            });
        },
        onLoad() {
            let systemInfo = uni.getSystemInfoSync();
            this.scrollViewHeight = systemInfo.screenHeight - systemInfo.statusBarHeight - this.$common.rpxToPx(177) + 'px'
        },
        methods: {
            activeClick(active){
                this.active = active;
            }
        }
    }
</script>

<style lang="scss" scoped>
    .header{
        position: relative;
        .headerBack{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .nav{
            position: relative;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20rpx 25rpx 0 25rpx;
            .li{
                /*flex: 1;*/
                text-align: center;
                position: relative;
                height: 75rpx;
                font-size: 30rpx;
                color: #555;
                display: flex;
                flex-direction: column;
                /*justify-content: center;*/
                align-items: center;
                image{
                    width: 38rpx;
                    height: 12rpx;
                    /*position: absolute;
                    left: 50%;
                    bottom: 0;
                    transform: translateX(-50%);*/
                    display: none;
                    margin-top: 8rpx;
                }
                &.active{
                    font-size: 32rpx;
                    color: #333;
                    image{
                        display: block;
                    }
                }
            }
        }
    }
    .scrollView{
        position: fixed;
        bottom: 0;
        left: 0;
        width:100%;
        z-index: 9;
    }
</style>
